<template>
  <div class="yxerp-home">
    <el-row :gutter="15">
      <!-- 左侧数据区域 -->
      <el-col :span="18">
        <!-- 快捷功能组件 -->
        <quick-functions :max-display="7" />

        <!-- 数据卡片 -->
        <stat-card-section :data-cards="dataCards" />

        <!-- 主要图表区域 -->
        <el-row :gutter="15" class="main-charts">
          <el-col :span="16">
            <chart-card 
              title="销售与生产趋势" 
              icon="fa fa-bar-chart"
              chart-id="salesProductionTrend"
              :height="280"
            >
              <template #tools>
                <el-radio-group v-model="trendChart.period" size="small">
                  <el-radio-button label="week">周</el-radio-button>
                  <el-radio-button label="month">月</el-radio-button>
                  <el-radio-button label="quarter">季</el-radio-button>
                </el-radio-group>
              </template>
            </chart-card>
          </el-col>
          <el-col :span="8">
            <chart-card 
              title="订单状态分布" 
              icon="fa fa-pie-chart"
              chart-id="orderStatusPie"
              :height="280"
            >
              <template #tools>
                <el-select v-model="orderStatusChart.type" size="small" style="width: 100px">
                  <el-option label="销售" value="sales"></el-option>
                  <el-option label="采购" value="purchase"></el-option>
                </el-select>
              </template>
            </chart-card>
          </el-col>
        </el-row>

        <!-- 次要图表区域 -->
        <el-row :gutter="15" class="sub-charts">
          <el-col :span="8">
            <chart-card 
              title="库存分析" 
              icon="fa fa-cubes"
              chart-id="inventoryAnalysis"
              :height="240"
            >
              <template #tools>
                <el-button type="primary" link size="small" @click="navigateTo('/yxerp/inventory/report')">查看详情</el-button>
              </template>
            </chart-card>
          </el-col>
          <el-col :span="8">
            <chart-card 
              title="采购支出分析" 
              icon="fa fa-shopping-cart"
              chart-id="purchaseExpenses"
              :height="240"
            >
              <template #tools>
                <el-button type="primary" link size="small" @click="navigateTo('/yxerp/purchase/report')">查看详情</el-button>
              </template>
            </chart-card>
          </el-col>
          <el-col :span="8">
            <chart-card 
              title="财务指标" 
              icon="fa fa-line-chart"
              chart-id="financialIndicators"
              :height="240"
            >
              <template #tools>
                <el-button type="primary" link size="small" @click="navigateTo('/yxerp/finance/report')">查看详情</el-button>
              </template>
            </chart-card>
          </el-col>
        </el-row>

        <!-- 底部图表 -->
        <el-row :gutter="15" class="bottom-charts">
          <el-col :span="12">
            <chart-card 
              title="生产计划完成率" 
              icon="fa fa-industry"
              chart-id="productionCompletion"
              :height="240"
            >
              <template #tools>
                <el-date-picker
                  v-model="productionChart.date"
                  type="month"
                  placeholder="选择月份"
                  size="small"
                  style="width: 130px"
                ></el-date-picker>
              </template>
            </chart-card>
          </el-col>
          <el-col :span="12">
            <chart-card 
              title="客户订单分布" 
              icon="fa fa-users"
              chart-id="customerDistribution"
              :height="240"
            >
              <template #tools>
                <el-radio-group v-model="customerChart.type" size="small">
                  <el-radio-button label="region">区域</el-radio-button>
                  <el-radio-button label="category">类别</el-radio-button>
                </el-radio-group>
              </template>
            </chart-card>
          </el-col>
        </el-row>
      </el-col>

      <!-- 右侧信息区域 -->
      <el-col :span="6">
        <!-- 右侧信息面板 -->
        <info-panel />
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, provide } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import StatCardSection from '../components/home/StatCardSection.vue'
import ChartCard from '../components/home/ChartCard.vue'
import InfoPanel from '../components/home/InfoPanel.vue'
import QuickFunctions from '../components/home/QuickFunctions.vue'

export default defineComponent({
  name: 'YxerpHome',
  components: {
    StatCardSection,
    ChartCard,
    InfoPanel,
    QuickFunctions
  },
  setup() {
    const router = useRouter()

    // 导航方法
    const navigateTo = (path: string) => {
      router.push(path)
    }

    // 数据卡片
    const dataCards = ref([
      { 
        title: '本月销售额', 
        value: '¥1,528,560', 
        trend: '+12.5%', 
        trendType: 'up',
        desc: '较上月增长', 
        icon: 'fa fa-money', 
        color: 'blue'
      },
      { 
        title: '订单总数', 
        value: '2,845', 
        trend: '+8.2%', 
        trendType: 'up',
        desc: '完成率 92%', 
        icon: 'fa fa-shopping-bag', 
        color: 'green'
      },
      { 
        title: '生产任务', 
        value: '156 项', 
        trend: '-3.1%', 
        trendType: 'down',
        desc: '按时完成率 87%', 
        icon: 'fa fa-industry', 
        color: 'orange'
      },
      { 
        title: '库存总值', 
        value: '¥3,245,620', 
        trend: '+5.4%', 
        trendType: 'up',
        desc: '周转率 2.8', 
        icon: 'fa fa-cubes', 
        color: 'purple'
      }
    ])

    // 图表配置
    const trendChart = ref({ period: 'month' })
    const orderStatusChart = ref({ type: 'sales' })
    const productionChart = ref({ date: new Date() })
    const customerChart = ref({ type: 'region' })

    // 将导航方法和数据提供给子组件
    provide('navigateTo', navigateTo)
    provide('chartData', {
      dataCards,
      trendChart,
      orderStatusChart,
      productionChart,
      customerChart
    })

    // 图表初始化
    onMounted(() => {
      // 销售与生产趋势图表
      const salesProductionChart = echarts.init(document.getElementById('salesProductionTrend'))
      salesProductionChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: {
          data: ['销售额', '销售目标', '生产量', '生产计划']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: [
          {
            type: 'value',
            name: '金额',
            axisLabel: { formatter: '{value} 万' }
          },
          {
            type: 'value',
            name: '数量',
            axisLabel: { formatter: '{value} 件' }
          }
        ],
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
          },
          {
            name: '销售目标',
            type: 'line',
            data: [150, 150, 150, 150, 200, 200, 200, 250, 250, 250, 300, 300]
          },
          {
            name: '生产量',
            type: 'bar',
            yAxisIndex: 1,
            data: [820, 932, 901, 934, 1290, 1330, 1320, 1450, 1550, 1700, 1800, 1950]
          },
          {
            name: '生产计划',
            type: 'line',
            yAxisIndex: 1,
            data: [900, 900, 900, 1000, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 2000]
          }
        ]
      })

      // 订单状态饼图
      const orderStatusPieChart = echarts.init(document.getElementById('orderStatusPie'))
      orderStatusPieChart.setOption({
        tooltip: { trigger: 'item' },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: '60%',
            data: [
              { value: 1048, name: '已完成' },
              { value: 735, name: '进行中' },
              { value: 580, name: '待处理' },
              { value: 484, name: '已取消' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })

      // 库存分析图表
      const inventoryChart = echarts.init(document.getElementById('inventoryAnalysis'))
      inventoryChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: { type: 'value' },
        yAxis: {
          type: 'category',
          data: ['原材料', '半成品', '成品', '包装物', '低值易耗品']
        },
        series: [
          {
            name: '当前库存',
            type: 'bar',
            stack: 'total',
            label: { show: true },
            emphasis: { focus: 'series' },
            data: [320, 302, 301, 334, 390]
          },
          {
            name: '安全库存',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: { focus: 'series' },
            data: [120, 132, 101, 134, 90]
          }
        ]
      })

      // 采购支出分析
      const purchaseChart = echarts.init(document.getElementById('purchaseExpenses'))
      purchaseChart.setOption({
        tooltip: { trigger: 'item' },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '采购支出',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold'
              }
            },
            labelLine: { show: false },
            data: [
              { value: 1048, name: '原材料' },
              { value: 735, name: '包装物' },
              { value: 580, name: '外协加工' },
              { value: 484, name: '辅料' },
              { value: 300, name: '其他' }
            ]
          }
        ]
      })

      // 财务指标图表
      const financialChart = echarts.init(document.getElementById('financialIndicators'))
      financialChart.setOption({
        tooltip: { trigger: 'axis' },
        radar: {
          indicator: [
            { name: '毛利率', max: 100 },
            { name: '净利率', max: 100 },
            { name: '周转率', max: 100 },
            { name: '资产收益率', max: 100 },
            { name: '负债率', max: 100 },
            { name: '现金流', max: 100 }
          ]
        },
        series: [
          {
            name: '财务指标',
            type: 'radar',
            data: [
              {
                value: [80, 67, 90, 83, 65, 78],
                name: '本季度'
              },
              {
                value: [75, 68, 85, 78, 68, 70],
                name: '上季度'
              }
            ]
          }
        ]
      })

      // 生产计划完成率
      const productionCompletionChart = echarts.init(document.getElementById('productionCompletion'))
      productionCompletionChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        legend: { data: ['计划量', '完成量'] },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['产品A', '产品B', '产品C', '产品D', '产品E']
        },
        yAxis: { type: 'value' },
        series: [
          {
            name: '计划量',
            type: 'bar',
            data: [100, 80, 120, 150, 90]
          },
          {
            name: '完成量',
            type: 'bar',
            data: [90, 82, 110, 140, 95]
          }
        ]
      })

      // 客户订单分布
      const customerDistributionChart = echarts.init(document.getElementById('customerDistribution'))
      customerDistributionChart.setOption({
        tooltip: { trigger: 'item' },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '订单分布',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '华东区' },
              { value: 735, name: '华北区' },
              { value: 580, name: '华南区' },
              { value: 484, name: '西南区' },
              { value: 300, name: '其他区域' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })

      // 监听窗口调整大小
      window.addEventListener('resize', () => {
        salesProductionChart.resize()
        orderStatusPieChart.resize()
        inventoryChart.resize()
        purchaseChart.resize()
        financialChart.resize()
        productionCompletionChart.resize()
        customerDistributionChart.resize()
      })
    })

    return {
      dataCards,
      trendChart,
      orderStatusChart,
      productionChart,
      customerChart,
      navigateTo
    }
  }
})
</script>

<style scoped lang="scss">
.yxerp-home {
  padding: 15px;
  background-color: #f5f7fa;

  .el-row {
    margin-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .main-charts,
  .sub-charts,
  .bottom-charts {
    margin-top: 15px;
  }
}
</style>